<template>
  <div>
    <header-page></header-page>
    <div class="carbox">
      <!-- <section class="shoping">
      <table>
        <th>商品名称</th>
        <th>市场价</th>
        <th>订购价</th>
        <th>数量</th>
        <th>操作</th>
        <tr v-for="(item, index) in arr" :key="index">
          <td>
            <i class="icon-select active"></i>
            <img
              :src="require('../../assets/images/shoppcarimg/' + item.img)"
              alt=""
            />
            <a href="#"
              ><span>{{ item.content }}</span
              ><br />
              <span class="cocolorlor">顺丰陆运深圳发货</span>
            </a>
          </td>
          <td> <s class="spri">¥{{ item.scpri }}</s> </td>
          <td>¥{{ item.dgpri }}</td>
          <td>
            <button>-</button
            ><input type="text" name="" id="" value="1" />
            <button>+</button>
          </td>
          <td>
            <a href="#" class="del">删除</a> <br />
            <a href="#">移除到我的收藏</a>
          </td>
        </tr>
      </table>
    </section>
     -->
      <el-table
        :data="shoppingcai"
        v-for="(item, index) in shoppingcai"
        :key="index"
        style="width: 100%"
        max-height="250"
      >
        <el-table-column fixed prop="date" label="商品名称" width="450">
          <template>
            <div>
              <!-- <i class="icon-select active"></i> -->
              <i :class="[item.pp?'icon-select':'icon-select active']" @click="zzz(index)"></i>
              <img
                :src="require('../../assets/images/shoppcarimg/' + item.img)"
                alt=""
              />
              <a href="#" class="td"
                ><span class="span">{{ item.content }}</span
                ><br />
                <span class="cocolorlor">顺丰陆运深圳发货</span>
              </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="市场价" width="180">
          <s class="spri">¥{{ item.price }}</s>
        </el-table-column>
        <el-table-column prop="province" label="订购价" width="180">
          <span>¥{{ item.dgpri }}</span>
        </el-table-column>
        <el-table-column prop="city" label="数量" width="180">
          <template slot-scope="scope">
              <button @click="jian(index)">-</button>
              <input type="text" v-model="item.count" />
              <button @click="jia(index)">+</button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, shoppingcai)"
              type="text"
              style="border: none"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="continue">
        <span class="ico ico-back"></span>
        <router-link to="./">继续挑选</router-link>
        <div class="fr">
          <span
            >应付金额：<span class="price">¥{{ total | Thousand }}</span></span
          ><button @click="topay()">去结算</button>
        </div>
      </div>
      <footer-page></footer-page>
    </div>
  </div>
</template>

<script>
import HeaderPage from "../../components/Header/header.vue";
import footerPage from "../../components/Footer/footer.vue";
import { mapState, mapMutations, mapGetters } from "vuex";

export default {
  components: {
    HeaderPage,
    footerPage,
  },
  data() {
    return {};
  },
  filters: {
    // 数字千分位加浮点处理
    Thousand(val) {
      let sum = String(val.toFixed(2));
      let reg = /(-?\d+)(\d{3})/;
      while (reg.test(sum)) {
        sum = sum.replace(reg, "$1,$2");
      }
      return sum;
    },
  },
  computed: {
    ...mapState(["shoppingcai"]),
    ...mapGetters(["total"]),
  },
  methods: {
    ...mapMutations(["jia", "jian", "deleteRow"]),
    zzz(i){
      this.shoppingcai[i].pp = !this.shoppingcai[i].pp
    },
    topay(){
      this.$router.push('./sendinfo')
    }
  },
  // mounted() {
  //   this.$axios.get("../../static/data/shoppcar.json").then((res) => {
  //     this.arr = res.data;
  //   });
  // },
};
$(function () {
  $(".icon-select").on("click", function () {
    console.log(1);
    $(".icon-select").toggleClass("active");
  });
});
</script>

<style scoped lang='less'>
.carbox {
  width: 1200px;
  margin: 20px auto;
}
.shoping {
  border: 1px solid #ccc;
}

.el-table {
  width: 1200px;
  .icon-select {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 20px;
    border: solid 1px #ccc;
    border-radius: 50%;
    margin-left: 10px;
  }
  .active {
    background-image: url(../../assets/images/shoppcarimg/ico_checkout.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
  }
}
.shoping table {
  th {
    height: 30px;
    line-height: 30px;
    padding: 0 40px;
    background: #ebebeb;
    color: #999;
  }
}
td {
  padding: 20px 0;
  text-align: left;
  a {
    display: inline-block;
    width: 200px;
    padding-left: 10px;
    color: #999;
  }
}
.span {
  display: inline-block;
  width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cocolorlor {
  color: #ff8a00;
}
button {
  background: none;
  outline: none;
  border: 1px solid #ccc;
}
input {
  width: 40px;
  border: 1px solid #ccc;
  margin: 0 5px;
}
.continue {
  position: relative;
  height: 50px;
  line-height: 50px;
  border: 1px solid #ccc;
  padding-left: 20px;
  margin: 20px 0;
  a {
    margin-left: 30px;
    color: #999;
  }
  .ico-back {
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 10px;
    width: 23px;
    height: 22px;
    background: url("../../assets/images/shoppcarimg/common_z.png") -67px -318px
      no-repeat;
  }
  .fr {
    float: right;
    span > .price {
      color: #ff6a00;
      font-weight: bold;
      font-size: 18px;
    }
    button {
      width: 150px;
      height: 50px;
      background: #ff6a00;
      outline: none;
      border: none;
      color: #fff;
      font-weight: bold;
    }
  }
}
.spri {
  color: #999;
}
</style>